$(document).ready(function () {
  $window = $(window);
  var lgHeight = $window.height()
  $('.story').height(lgHeight)
  $('[data-type]').each(function () {
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
  });
  $('section[data-type="background"]').each(function () {
    var $self = $(this);
    offsetCoords = $self.offset();
    topOffset = offsetCoords.top;
    $(window).scroll(function () {
      if ($window.scrollTop() !== 0) {
        $('header').css('backgroundColor', 'rgba(255, 255, 255, 0.5)')
      } else {
        $('header').css('backgroundColor', 'rgba(255, 255, 255, 1)')
      }
      if (($window.scrollTop() + $window.height()) > (topOffset) && ((topOffset + $self.height()) > $window.scrollTop())) {
        var yPos = -($window.scrollTop() / $self.data('speed'));
        if ($self.data('offsetY')) {
          yPos += $self.data('offsetY');
        }
        var coords = yPos + 'px' + ' left';
        $self.css({
          backgroundPosition: coords
        });
        $('[data-type="sprite"]', $self).each(function () {
          var $sprite = $(this);
          var yPos = -($window.scrollTop() / $sprite.data('speed'));
          var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
          $sprite.css({
            backgroundPosition: coords
          });
        });
      };
    });
  });
});